import M from "./m";
import MediaComponent from "./single";
import MediaGroupComponent from "./group";
class MediaShowcaseComponent extends M {
  componentName = 'mediaShowcase';
  media: MediaComponent = new MediaComponent({});
  meta_type: 'image' | 'video' | 'unknown' = 'image';
  mediaGroup: MediaGroupComponent = new MediaGroupComponent({});
  max_group: number = 1;
  get length() {
    return this.media.length + this.mediaGroup.length;
  }
  isEmpty() {
    return this.media.isEmpty() || this.mediaGroup.isEmpty();
  }

  materia_form() {
    return [{
      name: '素材',
      key: 'media',
      rules: () => {
        return this.media.media_restriction;
      },
      min: this.media.length,
      values: []
    }, {
      name: '副素材',
      key: 'mediaGroup',
      values: [],
      min: this.mediaGroup.length,
      rules: () => {
        return this.mediaGroup.media_restriction;
      },
    }]
  }

  mediaMap(_function: Function) {
    const media = this.media.mediaMap(_function);
    const mediaGroup = this.mediaGroup.mediaMap(_function);
    return [].concat([], media as any, mediaGroup as any);
  }

  empty() {
    this.media.empty();
    this.mediaGroup.empty();
  }
  query() {

    const mediaQuery = this.media.query()
    return {
      [this.meta_type]: mediaQuery,
      image_list: this.mediaGroup.query()
    }
  }
  setSrc(options: { keyFrameImageUrl: string, media_id: string, media_url: string, meta_type: string, cover_id: string, number: number }) {
    if (options.number >= 1) {
      this.mediaGroup.setSrc(Object.assign({}, options, {
        number: options.number - 1
      }))
    } else {
      this.media.setSrc(options);
    }
  }

  checkMetaType(component: any) {
    const { name } = component;
    if (name === 'image_showcase') return 'image';
    if (name === 'video_showcase') return 'video';
    return 'unknown';
  }
  // image_showcase.image_list.list.image_id;
  // video_showcase.video_llist.list.image_id;
  constructor(options: any) {
    super(options);
    this.init(options);
    if (options.children) {
      this.tx_component = options.name;
      this.meta_type = this.checkMetaType(options);
      this.media = new MediaComponent({
        ...(options.children.video || options.children.image)
      })
      this.mediaGroup = new MediaGroupComponent({
        ...options.children.image_list
      })
    }

  }


}

export default MediaShowcaseComponent
